<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="项目类型" prop="projectType">
        <el-input
          v-model="queryParams.projectType"
          placeholder="请输入项目类型"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名称"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item label="客户编号" prop="customerNo">
        <el-input v-model="queryParams.customerNo" placeholder="请输入客户编号" :clearable="true" />
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <el-input v-model="queryParams.version" placeholder="请输入版本" :clearable="true" />
      </el-form-item>
      <el-form-item label="服务器IP" prop="serverIp">
        <el-input v-model="queryParams.serverIp" placeholder="请输入服务器IP" :clearable="true" />
      </el-form-item>
      <el-form-item label="数据库名称" prop="databaseName">
        <el-input
          v-model="queryParams.databaseName"
          placeholder="请输入数据库名称"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="handleClickCreate"> 新建 </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="DevopsCustomer"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item label="修改" @click="handleClickChange(row)" />
        <context-menu-item label="删除" @click="handleClickDelete(row)" />
        <context-menu-item label="初始化" @click="handleClickInit(row)" />
        <context-menu-item label="升级" @click="handleClickUpgrade(row)" />
      </template>
    </Table>
  </ContentWrap>
  <DevopsCustomerEdit ref="editRef" @success="getPage" />
  <DevopsCustomerUpgrade ref="upgradeRef" @success="upgradeSuccess" />
  <ExecResultTip ref="resultTipRef" @close="getPage" />
</template>
<script setup name="DevopsCustomer" lang="ts">
import * as DevopsCustomerApi from '@/api/infra/devops/customer'
import DevopsCustomerEdit from './DevopsCustomerEdit.vue'
import ExecResultTip from '@/views/infra/devops/ExecResultTip.vue'
import DevopsCustomerUpgrade from './DevopsCustomerUpgrade.vue'
const editRef = ref()
const upgradeRef = ref()
const resultTipRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  projectType: undefined,
  customerName: undefined,
  customerNo: undefined,
  version: undefined,
  serverIp: undefined,
  databaseName: undefined
})
const queryData = ref()
const columns = [
  {
    label: '客户名称',
    prop: 'customerName'
  },
  {
    label: '项目',
    prop: 'version.project.name'
  },
  {
    label: '客户编号',
    prop: 'customerNo'
  },
  {
    label: '本地化部署',
    prop: 'isLocal',
    formatter: ({ isLocal }) => (isLocal ? '是' : '否')
  },
  {
    label: '版本',
    prop: 'version.version'
  },
  {
    label: '服务器IP',
    prop: 'server.ip'
  },
  {
    label: '服务器名称',
    prop: 'server.name'
  },
  {
    label: '数据库名称',
    prop: 'databaseName'
  },
  {
    label: '同时在线用户数',
    prop: 'onlineAccountCount'
  },
  {
    label: '到期时间',
    prop: 'expiresTime'
  },
  {
    label: '数据库名称',
    prop: 'databaseName'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]
/** 初始化 */
onMounted(() => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新建按钮操作 */
const handleClickCreate = () => {
  editRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await DevopsCustomerApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editRef.value.open('update', row.id)
}

/** 处理右击事件 修改 */
const handleClickChange = (row) => {
  editRef.value.open('update', row.id)
}

/** 处理右击事件 删除 */
const handleClickDelete = async (row) => {
  await DevopsCustomerApi.deleted(row.id)
  getPage()
}

const handleClickInit = (row) => {
  resultTipRef.value.open(row.id, 'customer-init')
}

const handleClickUpgrade = (row) => {
  upgradeRef.value.open(row.id)
}

const upgradeSuccess = (param) => {
  resultTipRef.value.open(param, 'customer-upgrade')
}
</script>
